<template>
  <div class="c-container">
    <div class="c-title">用户列表</div>
    <div class="c-body">
      <div class="list-con">
        <div class="list-item">
          <div class="small">id</div>
          <div class="small">头像</div>
          <div>用户名</div>
          <div class="small">性别</div>
          <div>生日</div>
          <div>手机号</div>
          <div>邮箱</div>
          <div class="small">所在地</div>
          <div>个性说明</div>
          <div class="small">用户状态</div>
          <div class="small">是否激活</div>
          <div>操作</div>
        </div>
        <div class="list-item" v-for="(item,index) in data" :key="index">
          <div class="small">{{item.userId}}</div>
          <div class="small">
            <img :src="comUserFace(item.face)" :alt="item.face" />
          </div>
          <div>{{item.username}}</div>
          <div class="small">{{cpSex(item.sex)}}</div>
          <div>{{item.birthday}}</div>
          <div>{{item.phone}}</div>
          <div>{{item.email}}</div>
          <div class="small">{{item.location}}</div>
          <div>{{item.intro}}</div>
          <div class="small">{{item.status}}</div>
          <div class="small">{{item.activated}}</div>
          <div>
            <button v-on:click="delUser(index)">删除</button>
            <button v-on:click="editProfile(index)">编辑</button>
          </div>
        </div>

      </div>
      <div class="list-page">
        page
      </div>

    </div>
    <div class="c-popup" v-if="visible_edit">
      <EditProfile :data="data" :defaultIndex="defaultIndex" :hideEditFn="hideEditFn" />
    </div>
  </div>
</template>
<script>
import Axios from "axios";
import EditProfile from "./EditProfile";
export default {
  name: "userList",
  components: {
    EditProfile
  },
  data() {
    return {
      visible_edit: false,
      defaultIndex: 1,
      data: [{}],
      face: 1
    };
  },
  created() {
    this.init();
  },
  computed: {},
  methods: {
    init() {
      Axios({
        url: "/apis/userList",
        method: "post"
      }).then(response => {
        let { code, data, msg } = response.data;
        if (code == 0) {
          this.data = data;
        }
      });
    },
    cpSex(value) {
      let str = "保密";
      switch (Number(value)) {
        case 0:
          str = "男";
          break;
        case 1:
          str = "女";
          break;
        case 2:
          str = "保密";
          break;
      }
      return str;
    },
    comUserFace(face) {
      return "./../static/userFace/" + (face ? face : 1) + ".png";
    },
    delUser(index) {
      console.log(index);
    },
    visibleEditFn() {
      this.visible_edit = true;
    },
    hideEditFn() {
      this.visible_edit = false;
    },
    editProfile(index) {
      this.defaultIndex = index;
      this.visibleEditFn();
    }
  }
};
</script>
<style lang='scss'>
.c-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .c-title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ddd;
  }
  .c-body {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    .list-con {
      flex: 1;
      border: 1px solid #ddd;
      overflow-y: auto;
      .list-item {
        height: 40px;
        display: flex;
        flex-direction: row;
        background: #fefefe;
        > div {
          flex: 1;
          line-height: 40px;
          min-width: 80px;
          padding-left: 10px;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          &:nth-child(2n) {
            background: #f6f6f6;
          }
          > img {
            width: 40px;
            height: 40px;
            border-radius: 100%;
          }
        }
        .small {
          flex: none;
          text-align: center;
        }
        &:first-child {
          > div {
            text-align: center;
          }
        }
        &:nth-child(2n) {
          background: #f6f6f6;
          > div {
            &:nth-child(2n) {
              background: #fefefe;
            }
          }
        }
      }
    }
    .list-page {
      height: 40px;
    }
  }
  .c-popup {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    .editProfile-popup {
      width: 400px;
      height: auto;
      padding: 10px;
      background: #00bcd4;
      .editProfile-title {
        height: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        line-height: 30px;
      }
      .form-item {
        height: 26px;
        padding: 5px 0;
        display: flex;
        > label {
          width: 80px;
          height: inherit;
          display: flex;
          align-items: center;
        }
        > div {
          flex: 1;
          height: inherit;
          > input[type='text'] {
            flex: 1;
            height: inherit;
          }
        }
      }
      .form-btn {
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
</style>
